<template>
<!-- 使用步骤：
1、替换addRoles
2、替换roleName,也可拷贝后再替换
3、拷贝组件
4、拷贝两个数据
5、拷贝一个函数
6、在触发中执行; -->
  <div>
   
    <!--  -->
    <!--  -->
    <!--  -->
    <el-dialog
      title="添加角色"
      :visible.sync="dialogVisible"
      width="50%"
      @close="dialogClosed"
      @open="dialogOpen"
    >
      <!-- 对话框中的表单 -->
      <el-form
        :model="dialogForm"
        :rules="dialogForm_rules"
        ref="dialogForm_ref"
        label-width="100px"
      >
        <!-- label-width是前面的文本宽度 -->
        <el-form-item
          label="角色名称"
          prop="roleName"
        >
          <el-input v-model="dialogForm.roleName"></el-input>
        </el-form-item>
         <el-form-item
          label="角色描述"
          prop="roleDesc"
        >
          <el-input v-model="dialogForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button
          type="primary"
          @click="clickConfirm"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash"
export default {
  // clickBtn响应按钮的点击
  // dialogForm对话框中的表单数据对象
  // callback点击确定按钮后的回调函数
  props: ["callback","clickBtn","dialogForm"],
  created() {},
  mounted() {},
  data() {
    return {
      
      dialogVisible:false,
      // 对话框中的表单验证规则
      dialogForm_rules: {
        roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        // 角色描述可以为空
      },
      // 
      // 拷贝
      
      // 
      // 
    };
  },
  watch:{
    clickBtn(val){
        this.dialogVisible=true;
    }
  },
  methods: {
    // 对话框打开时触发
    dialogOpen(){
      // 在表单打开时还没有this.$refs.dialogForm_ref这个元素节点
    },
    // 对话框关闭时触发
    dialogClosed() {
      // 重置表单
       this.$refs.dialogForm_ref.resetFields();
    },
    // 点击对话框确定按钮触发
    clickConfirm() {
      this.$refs.dialogForm_ref.validate(valid => {
        if (!valid) {
          return;
        }
        this.dialogVisible=false;
        const _dialogForm=_.cloneDeep(this.dialogForm);
        this.$emit("confirm",_dialogForm);
        
      });
    },

    // 拷贝
    
  }
};
</script>

<style scoped lang="less">
</style>

